<template>
  <div class="main">
    <div class="mainTitle">
      <h2>参赛要求</h2>
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="add"
          >新增</el-button
        >
      </div>
    </div>
    <TableList
    :loading="loading"
      :tabledata="tableData"
      :params="params"
      :tabledatacolumn="tableDataColumn"
      :isshow="false"
      @handleCurrentChange="handleCurrentChange"  @handleSizeChange="handleSizeChange"
    >
      <template v-slot:default="info">
        <el-button
          icon="el-icon-edit"
          circle
          @click="handleEdit(info.info)"
        ></el-button>
        <el-button
          icon="el-icon-delete"
          circle
          @click="deleteRow(info.info)"
        ></el-button>
      </template>
    </TableList>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <Form :formobj="formobj" :formdata="formdata" ref="form" :formrules="formrules"></Form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit" >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { contentApiAdd,contentApiqueryAll,columnqueryAll,contentApiedit,contentApidelete,contentApiqueryOne } from "@/api/webpage";
import Form from "@/components/form.vue";
import TableList from "@/components/TableList.vue";
import { validateNum } from "@/utils/validator";
export default {
  name: "Competition",
  components: {
    TableList,
    Form,
  },
  data() {
    return {
      loading:true,
        title:'',
      dialogVisible: false,
      tableData: [],
      tableDataColumn: [
        { label: "标题", key: "title", },
        { label: "排序", key: "no", },
      ],
      params: {
        total: 100,
        page: 1,
        pagesize: 10,
      },
      formobj: [
        { label: "标题", key: "title", type: "input" },
        { label: "排序", key: "no", type: "input" },
        { label: "内容", key: "content", type: "editor" }
      ],
      formrules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
        ],
         no: [
          { required: false, message: "请输入序号", trigger: "blur" },
           {
            validator: validateNum,
            message: "请输入正整数",
            trigger: "blur",
          },
        ],
        content: [
           { required: false, message: "请输入正文", trigger: "change" },
        ],
      },
      type: "increased",
      rowId:'',
      formdata:{}
    };
  },
  created() {
    this.getlist()
  },
  methods: {
    handleCurrentChange(val) {
      this.params.page = val;
    },
    getlist(){
      let data = {
        title: "",
        subTitle: "",
        type: "",
        columnId: "828E54DC698941A0B05DCDF15ACB1235",
      };
      contentApiqueryAll(data).then((res) => {
        if (res.code == 0) {
          this.loading = false
          this.tableData = res.data;
        }
      });
    },
    deleteRow(row) {
      console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids = [];
          ids.push(row.id);
          contentApidelete(ids)
            .then((res) => {
              if (res.data == 1) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getlist();
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
    add() {
      this.title = "新增";
      this.type = "increased";
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.title = "编辑";
      this.type = "edit";
      this.rowId = row.id;
      this.dialogVisible = true;
      this.getdata(row.id);
    },
    getdata(id) {
      contentApiqueryOne({ id: id })
        .then((res) => {
          if (res.code == 0) {
            console.log(res);
            this.formdata = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submit(){
       this.$refs.form.getData().then(res=>{
         if (this.type == "edit") {
          res.id = this.rowId;
          contentApiedit(res).then((response) => {
              if (response.data == 1) {
                console.log(response);
                this.$message.success("成功");
                this.dialogVisible = false;
                this.getlist();
                this.$refs.form.resetForm();
                this.$refs.form.clearValidate();
              } else {
                this.$message.error("失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
         }else{
          res.columnId = '828E54DC698941A0B05DCDF15ACB1235'
          contentApiAdd(res).then((response) => {
              if (response.data == 1) {
                console.log(response);
                this.$message.success("成功");
                this.dialogVisible = false;
                this.getlist();
                this.$refs.form.resetForm();
                this.$refs.form.clearValidate();
              } else {
                this.$message.error("失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
         }
            
            
            //  this.dialogVisible = false;
            //  this.$refs.bannerForm.resetForm()
            //  this.$refs.bannerForm.clearValidate()
        })
    },
    cancel(){
        // this.$refs.bannerForm.resetForm()
        // this.$refs.bannerForm.clearValidate()
    },
  },
};
</script>
<style scoped>
@import "~@/assets/css/adminstyle.css";
</style>

